<template>
	<view class="page">
		<topVue title="写评价"></topVue>
		<view class="productVue flex align-center margin30">
			<view class="picVue"></view>
			<view class="flex-column padding-row20 flex-between" style="height: 130rpx">
				<view class="name">华为mate70 pro</view>
				<view class="kg">标准装</view>
				<view class="price">1229积分</view>
			</view>
		</view>
		
		<view class="rateVue">
			<view class="label">商品评分</view>
			<view class="text-center margin30">
				<u-rate :count="5" v-model="value" active-color="#1CC289" size="46"></u-rate>
			</view>
		</view>
		
		<view class="box margin30">
			<view class="flex-between align-center padding-row30">
				<view class="label">添加图片</view>
				<text style="color: #6B7280; line-height: 1;">0/9</text>
			</view>
			<view class="inner flex-wrap flex">
				<view class="item borderVue flex-column align-center flex-center" v-if="imgs.length<9" @click="chooseFun()">
					<image src="../../static/camera.png" style="width: 46rpx; height: 46rpx;"></image>
					<u-gap height="20"></u-gap>
					<text style="color: #6B7280;line-height: 1; font-size: 24rpx;">添加</text>
				</view>
				<view class="item" v-for="(item, index) in imgs" :key="index" @click="removeFun(item)">
					<image :src="item" style="width: 100%; height: 100%;"></image>
				</view>
			</view>
			<textarea placeholder="分享您对这个商品的使用体验..." v-model="text"></textarea>
		</view>
		
		<view class="loginBtn margin50">提交</view>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				value: 5,
				imgs: [],
				text: ""
			}
		},
		methods: {
			chooseFun(){
				let count = 9 - this.imgs.length
				this.$utils.choose(count).then(res=>{
					console.log(res.tempFilePaths)
					this.imgs = this.imgs.concat(res.tempFilePaths)
					console.log(this.imgs)
				})
			},
			removeFun(item){
				this.imgs = this.imgs.filter(ver=>{
				    return item != ver
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.productVue {
		width: 100%;
		border-bottom: 1rpx solid #f5f5f5;
		border-top: 1rpx solid #f5f5f5;
		padding: 30rpx;
		.picVue {
			width: 130rpx;
			height: 130rpx;
			background: #f5f5f5;
			border-radius: 15rpx;
		}
		.name {
			color: #333;
			font-weight: 600;
			line-height: 1;
		}
		.kg {
			color: #666;
			line-height: 1;
		}
		.price {
			color: #1CC289;
			font-weight: 600;
			line-height: 1;
		}
	}
	
	.rateVue {
		width: 100%;
		border-bottom: 1rpx solid #f5f5f5;
		padding: 30rpx;
		.label {
			font-weight: 600;
			line-height: 1;
			font-size: 30rpx;
			text-align: center;
		}
	}
	
	.inner {
		width: 100%;
		padding: 30rpx 30rpx 0;
		.item {
			width: 210rpx;
			height: 210rpx;
			border-radius: 16rpx;
			margin-bottom: 30rpx;
			margin-right: 30rpx;
			overflow: hidden;
		}
		.item:nth-child(3n) {
			margin-right: 0;
		}
		.borderVue {
			border: #E5E7EB 1rpx dashed;
		}
	}
	
	textarea {
		width: 690rpx;
		height: 200rpx;
		background: #F9FAFB;
		border-radius: 15rpx;
		display: block;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		color: #333;
		margin: 0 auto;
	}
	
	.loginBtn {
		width: 690rpx;
		height: 92rpx;
		background: linear-gradient(to right, #1CC289, #60A5FA);
		border-radius: 15rpx;
		line-height: 92rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		font-weight: 600;
	}
</style>